<template>
	<view class="d-area d-info-area">

		<view class="infos">
			<view class="title"> 项目信息 </view>
			<view class="more flex">
				<view class="flex1">
					<view class="item"> <text class="l-t">占地面积:</text>  {{ info.ztSpace.siteArea}} <sm/> </view>
					<view class="item"> <text class="l-t">容积率:</text>  {{ info.ztSpace.siteArea}} </view>
					<view class="item"> <text class="l-t">物业类型:</text>  {{ info.ztSpace.siteArea}} </view>
					<view class="item"> <text class="l-t">停车位:</text>  {{ info.ztSpace.carport}} </view>
					<view class="item"> <text class="l-t">总户数:</text>  {{ info.ztSpace.siteArea}} </view>
				</view>
				<view class="flex1">
					<view class="item"> <text class="l-t">建筑面积:</text> {{ info.ztSpace.siteArea}} <sm/> </view>
					<view class="item"> <text class="l-t">绿化率:</text> {{ info.itemInformation.greeningRate}} %</view>
					<view class="item"> <text class="l-t">装修情况:</text> {{ info.ztSpace.siteArea}} <sm/> </view>
					<view class="item"> <text class="l-t">车位配比:</text>  {{ info.ztSpace.siteArea}} </view>
					<view class="item"> <text class="l-t">楼栋总数:</text>  {{ info.ztSpace.siteArea}} </view>
				</view>
			</view>

			<view class="flex1">
				<view class="item"> <text class="l-t">物管公司:</text>  {{  info.itemInformation.management }} </view>
				<view class="item"> <text class="l-t">物管费:</text>  {{ info.itemInformation.managefee}} </view>
				<view class="item"> <text class="l-t">开发商:</text>  {{  info.itemInformation.developer }}</view>
			</view>
		</view>
		<view class="bar"></view>

		<view class="infos">
			<view class="title"> 项目简介绍 </view>
			<u-read-more show-height="200">
				<rich-text :nodes="content"></rich-text>
			</u-read-more>
		</view>
		<!-- 总价 编号 单价 时间 标签 -->
		<view class="more-info cc">
			<view class="flex-between ">
				<view > 总价 </view><view > 房源编号:220433 </view>
			</view>
			<view class="flex ">
				<view class="number-line flex ">
					<view > ￥ </view><view class="bg-number">260万 </view>
				</view>
				12人整关注次房源
			</view>
			<view class="flex-between ">
				<view > 单价:177元/m </view><view > 发布:2011年11月11日</view>
			</view>
			<view class="flex tags">
				 <u-tag text="中央空调" size="mini" shape="circle" bg-color="#FCCF09"  color="#000" border-color="#fff" >   </u-tag>
				 <u-tag text="南北对流" size="mini" shape="circle" bg-color="#FCCF09"  color="#000" border-color="#fff" >   </u-tag>
				 <u-tag text="江景房" size="mini" shape="circle" bg-color="#FCCF09"  color="#000" border-color="#fff" >   </u-tag>
			</view>
		</view>
		<!-- 面积 -->
		<view class="flex" v-if="render('detail-gaocen')||render('detail-hose')||render('detail-office')||render('detail-shop')">
			<view class="area-item ">
				 <view class="area-name cc"> 建筑面积 </view> 
				 <view class="flex area-number">
				 	116 <view>m</view>
				 </view>
			</view> 
			<view class="area-item ">
				 <view class="area-name cc">实用面积 </view> 
				 <view class="flex area-number">
				 	116 <view>m</view>
				 </view>
			</view> 
			 <view class="area-item ">
			 	 <view class="area-name cc"> 夹层面积 </view> 
			 	 <view class="flex area-number">
			 	 	116 <view>m</view>
			 	 </view>
			 </view> 
		</view>
		
		<view class="infos" v-if="render('detail-gaocen')||render('detail-hose')||render('detail-office')||render('detail-shop')">
			<view class="title"> 物业详情 </view>
			<view class="flex">
				<view class="flex1"> <view class="cc"> 装修:</view> 简装 </view>
				<view class="flex1"> <view class="cc"> 楼层:</view> 13/22层 </view>
			</view> 
			<view class="flex">
				<view class="flex1"> <view class="cc"> 装修:</view> 毛坯 </view>
				<view class="flex1"> <view class="cc"> 层高:</view> 6米 </view>
			</view> 
		</view>
		 
		
		<view class="infos" v-if="render('detail-gaocen')||render('detail-hose')||render('detail-office')||render('detail-shop')">
			<view class="title"> 物业配置 </view>
			<view class="tags">
			      <u-tag   
				  text="中央空调"
				  size="mini" shape="circle" bg-color="#FFF" 
				  color="#CCC"
				  border-color="#CCC" >   </u-tag>
				  <u-tag
				  text="办公好"
				  size="mini" shape="circle" bg-color="#FFF" 
				  color="#CCC"
				  border-color="#CCC" >   </u-tag>
				  <u-tag
				  text="车位多"
				  size="mini" shape="circle" bg-color="#FFF" 
				  color="#CCC"
				  border-color="#CCC" >   </u-tag>
			</view> 
		</view>
		<view class="infos" v-if="render('detail-gaocen')||render('detail-hose')||render('detail-office')||render('detail-shop')">
			<view class="title"> 价格走势 </view>
			 
		</view> 
		<view class="infos" v-if="render('detail-gaocen')||render('detail-hose')||render('detail-office')||render('detail-shop')">
			<view class="title"> 经纪评房 </view>
			<div>1.房子好 很好</div>
			<div>2.风景好</div>
			<div>3.交通好</div>
		</view>
		<view class="infos" v-if="render('detail-gaocen')||render('detail-hose')||render('detail-office')||render('detail-shop')">
			<view class="title"> 小区概况 </view>
			 
		</view> 
		
		<view class="bar"></view>
	</view>
</template>

<script>
	export default {
		props:{
			info:Object
		},  
		mounted() {
			this.content = tihs.info.describe  || this.info.itemInformation.introduction
		},
		data() {
			return {
				content: "X项目计划租用地块周边场地建造售楼处。场地租赁和政府沟通时间周期长，几经转换，从东南西北各个方向找了个遍，政府要求诸多，要求不能有建筑物，又要求不能有大面积绿化，最终方案未能实现。配合着租赁计划，三宝方案做了多轮设计修改，最终未能落地。而且租赁地块最终实地踏勘，发现交通组织不便，离高架近，且高架下的地面道路正在施工，有围挡等，届时将影响看房通车，且因该项目定位高端，售楼处打造标准高，租赁方案造价不菲，沉没成本巨大。好在最终放弃租赁方案，但工期实质已消耗"
			};
		}
	}
</script>

<style lang="scss">
	.d-info-area {
		.item {
			margin: 5px 0;
		}

		.l-t {
			width: 64px;
			display: inline-block;
			margin-right: 10px;
			color: #CCC;
			text-align: justify;
			text-justify: distribute-all-lines; // 这行必加，兼容ie浏览器
			text-align-last: justify;
		}

		.more {
			display: flex;
			margin-bottom: 20px;
			align-items: flex-start;
		}
	}
</style>
